<template>
  <div class="integration">
    <div class="integration-list">
      <!-- <div
        class="integration-item"
        v-for="(item,index) in list"
        :key="index"
        @click="goToPath(item.path)"
      >
        <p>
          <img :src="item.icon" alt />
        </p>
        <p>{{item.title}}</p>
      </div>-->

      <cell-group>
        <field
          v-for="(item,index) in list"
          :key="index"
          @click="goToPath(item.path)"
          :label="item.title"
          readonly
        >
          <div class="icon" slot="left-icon">
            <img :src="item.icon" alt />
          </div>
        </field>
      </cell-group>
    </div>

    <div class="submit">
      <van-button plain type="danger" size="large" @click="logout">退出系统</van-button>
    </div>
  </div>
</template>

<script>
import { Button, Field, Cell, CellGroup, Toast, Dialog } from "vant";

export default {
  components: {
    vanButton: Button,
    Field,
    Cell,
    CellGroup
  },
  data() {
    return {
      list: [
        {
          title: "个人信息",
          icon: require("../img/我的.png"),
          path: "/personal_info"
        },
        // {
        //   title: "我的消息",
        //   icon: require("../img/信息拷贝.png"),
        //   path: "/home/message"
        // },
        // {
        //   title: "实体店报名",
        //   icon: require("../img/店铺.png"),
        //   path: "/offline_shop_sign_up"
        // },
        {
          title: "代理协议",
          icon: require("../img/文档.png"),
          path: "/apply_agreement"
        },
        {
          title: "绑定微信",
          icon: require("../img/微信.png"),
          path: "/binding_wechat"
        },
        {
          title: "问题反馈",
          icon: require("../img/修改.png"),
          path: "/problem_feedback"
        }
      ]
    };
  },
  mounted() {
    this.$EventBus.$on("rightEvent", function() {
      console.log("右键");
    });
  },
  methods: {
    // 跳转路径
    goToPath(path) {
      this.$router.push({
        path: path
      });
    },

    // 退出登录
    logout() {
      Dialog.confirm({
        title: "确认退出系统",
        message: ""
      })
        .then(() => {
          localStorage.removeItem("httpToken");
          localStorage.removeItem("userID");
          localStorage.removeItem("userInfo");

          Toast.success("安全退出系统成功");

          this.$router.replace({
            path: "/login"
          });
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style scoped>
.integration-list {
  background-color: #fff;
}

.integration-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line-between-color);
  transition: 0.2s;
}

.integration-item:hover {
  background-color: var(--line-between-color);
}

.icon {
  display: flex;
  align-items: center;
}

.icon,
.integration-item p:first-child {
  width: 19px;
  height: 19px;
}

.icon img,
.integration-item p:first-child img {
  width: 100%;
  height: 100%;
}

.integration-item p:last-child {
  padding-left: 10px;
}

.submit {
  --padding-width: 30px;
  padding: 10px var(--padding-width);
  position: absolute;
  bottom: 30px;
  width: calc(100% - var(--padding-width) * 2);
}
</style>